import { QUIView } from "./QUIView";
import QGamePlugin from "./QGamePlugin";

export type QUIScrollAreaConfig = {
    id?: string;
    class?: string;

    widthRatio?: number;
    heightRatio?: number;

    width?: number;
    height?: number;

    miniWidth?: number;
    miniHeight?: number;

    maxWidth?: number;
    maxHeight?: number;

    left?: number;
    top?: number;

    right?: number | undefined;

    bottom?: number | undefined;
    background?: number | string;

    alpha?: number;
};

/**
 * 滚动区域
 *
 * 用于显示超出容器大小的内容，通常用于显示大量的内容。
 * 滚动区域通常包含一个容器，容器中包含需要显示的内容。
 */
export class QUIScrollArea extends QUIView {
    protected name: string = "QUIScrollArea";

    constructor(
        scene: Phaser.Scene,
        manage: QGamePlugin,
        config?: QUIScrollAreaConfig
    ) {
        super(scene, manage, config);
        this.initScrollBarEvent();
    }
    initScrollBar() {
        if (this.scrollYBarBackground == null) {
            this.scrollYBarBackground = this.scene.add.rectangle(
                0,
                0,
                10,
                10,
                this.scrollBarBackgroundColor,
                1
            );
            this.scrollYBarBackground.setOrigin(0, 0);
            this.Container.add(this.scrollYBarBackground);
        }
        if (this.scrollYBar == null) {
            this.scrollYBar = this.scene.add.rectangle(
                0,
                0,
                10,
                10,
                this.scrollBarColor,
                1
            );
            this.scrollYBar.setOrigin(0, 0);
            this.Container.add(this.scrollYBar);
        }

        if (this.scrollXBarBackground == null) {
            this.scrollXBarBackground = this.scene.add.rectangle(
                0,
                0,
                10,
                10,
                this.scrollBarBackgroundColor,
                1
            );
            this.scrollXBarBackground.setOrigin(0, 0);
            this.Container.add(this.scrollXBarBackground);
        }
        if (this.scrollXBar == null) {
            this.scrollXBar = this.scene.add.rectangle(
                0,
                0,
                10,
                10,
                this.scrollBarColor,
                1
            );
            this.scrollXBar.setOrigin(0, 0);
            this.Container.add(this.scrollXBar);
        }
    }

    protected onScrollAreaWheel(
        pointer: Phaser.Input.Pointer,
        deltaX: number,
        deltaY: number,
        deltaZ: number
    ) {
        // console.log(deltaX, deltaY);
        if (this.scrollYBar) {
            let scrollWidth = 0;
            if (
                this.scrollXBarBackground &&
                this.scrollXBarBackground.visible
            ) {
                scrollWidth = this.scrollWidth;
            }
            let y = this.scrollYBar.y + deltaY * 0.5;
            y = Phaser.Math.Clamp(
                y,
                0,
                this.height - this.scrollYBar.height - scrollWidth
            );
            this.scrollYBar.y = y;

            // 计算容器位置
            const scrollRatio =
                y / (this.height - scrollWidth - this.scrollYBar.height);

            this.scrollTop =
                scrollRatio * (this.maxHeight - this.height + scrollWidth);

            this.childViews.forEach((node) => {
                node.ScrollTop = this.scrollTop;
            });
        }
    }
    initScrollBarEvent() {
        // this.scene.input.on("wheel", (pointer, gameObjects, deltaX, deltaY) => {
        //     content.y += deltaY * 0.5;

        //     // 限制滚动范围
        //     const minY = 300 - maskHeight / 2;
        //     const maxY = minY + 20 * 40 - maskHeight;
        //     content.y = Phaser.Math.Clamp(content.y, minY, maxY);
        // });

        // if (this.Background) {
        //     this.Background.setInteractive();
        //     console.log("init mask wheel");
        //     this.mask.on("wheel", (pointer, deltaX, deltaY, deltaZ) => {
        //         console.log("wheel");
        //     });
        // }

        if (this.scrollYBar == null) {
            return;
        }
        this.scrollYBar.setInteractive();
        this.scene.input.setDraggable(this.scrollYBar);
        this.scrollYBar.on(
            "drag",
            (pointer: Phaser.Input.Pointer, dragX: number, dragY: number) => {
                if (this.scrollYBar == undefined) {
                    console.log("drag undefine");
                    return;
                }

                // 如果存在纵向滑动条需要剪掉横向滑动条的宽度
                let scrollWidth = 0;
                if (
                    this.scrollXBarBackground &&
                    this.scrollXBarBackground.visible
                ) {
                    scrollWidth = this.scrollWidth;
                }

                dragY = Phaser.Math.Clamp(
                    dragY,
                    0,
                    this.height - this.scrollYBar.height - scrollWidth
                );
                this.scrollYBar.y = dragY;

                // 计算容器位置
                const scrollRatio =
                    dragY /
                    (this.height - scrollWidth - this.scrollYBar.height);

                this.scrollTop =
                    scrollRatio * (this.maxHeight - this.height + scrollWidth);

                this.childViews.forEach((node) => {
                    node.ScrollTop = this.scrollTop;
                });
            }
        );

        if (this.scrollXBar == null) {
            return;
        }

        this.scrollXBar.setInteractive();
        this.scene.input.setDraggable(this.scrollXBar);
        this.scrollXBar.on(
            "drag",
            (pointer: Phaser.Input.Pointer, dragX: number, dragY: number) => {
                if (this.scrollXBar == undefined) {
                    console.log("drag undefine");
                    return;
                }

                // 如果存在纵向滑动条需要剪掉横向滑动条的宽度
                let scrollWidth = 0;
                if (
                    this.scrollYBarBackground &&
                    this.scrollYBarBackground.visible
                ) {
                    scrollWidth = this.scrollWidth;
                }

                dragX = Phaser.Math.Clamp(
                    dragX,
                    0,
                    this.width - this.scrollXBar.width - scrollWidth
                );
                this.scrollXBar.x = dragX;

                // 计算容器位置
                const scrollRatio =
                    dragX / (this.width - scrollWidth - this.scrollXBar.width);

                this.scrollLeft =
                    scrollRatio * (this.maxWidth - this.width + scrollWidth);

                // console.log(this.scrollLeft);
                this.childViews.forEach((node) => {
                    node.ScrollLeft = this.scrollLeft;
                });
            }
        );
    }

    calculateScroll() {
        if (this.scrollYBar && this.scrollYBarBackground) {
            if (this.overflowY === "auto") {
                if (this.maxHeight > this.height) {
                    this.scrollYBarBackground.setVisible(true);

                    this.scrollYBar.setVisible(true);
                } else {
                    this.scrollYBarBackground.setVisible(false);
                    this.scrollYBar.setVisible(false);
                }
            } else if (this.overflowY === "scroll") {
                this.scrollYBarBackground.setVisible(true);
                this.scrollYBar.setVisible(true);
            }

            if (this.scrollYBarBackground) {
                this.scrollYBarBackground.height = this.height;
                this.scrollYBarBackground.width = this.scrollWidth;
                this.scrollYBarBackground.x =
                    this.Width - this.scrollYBarBackground.width;

                this.scrollYBarBackground.y = this.borderWidth;
                this.scrollYBarBackground.fillColor =
                    this.scrollBarBackgroundColor;
            }

            if (this.scrollYBar) {
                this.scrollWidth = this.scrollWidth;
                this.scrollYBar.x = this.width - this.scrollYBar.width;
                this.scrollYBar.y = 0;
                this.scrollYBar.fillColor = this.scrollBarColor;
            }

            this.scrollYBar.height = Math.max(
                30,
                (this.Height / this.MaxHeight) * this.Height
            );
        }

        if (this.scrollXBar && this.scrollXBarBackground) {
            if (this.overflowX === "auto") {
                if (this.maxWidth > this.width) {
                    this.scrollXBarBackground.setVisible(true);
                    this.scrollXBar.setVisible(true);
                } else {
                    this.scrollXBarBackground.setVisible(false);
                    this.scrollXBar.setVisible(false);
                }
            } else if (this.overflowX === "scroll") {
                this.scrollXBarBackground.setVisible(true);
                this.scrollXBar.setVisible(true);
            }

            if (this.scrollXBarBackground) {
                this.scrollXBarBackground.width = this.width;
                this.scrollXBarBackground.height = this.scrollWidth;
                this.scrollXBarBackground.y =
                    this.Height - this.scrollXBarBackground.height;

                this.scrollXBarBackground.x = 0;
                this.scrollXBarBackground.fillColor =
                    this.scrollBarBackgroundColor;
            }

            if (this.scrollXBar) {
                this.scrollXBar.height = this.scrollWidth;
                this.scrollXBar.y = this.height - this.scrollXBar.height;
                this.scrollXBar.x = 0;
                this.scrollXBar.fillColor = this.scrollBarColor;
            }

            this.scrollXBar.width = Math.max(
                30,
                (this.Width / this.MaxWidth) * this.Width
            );
        }
    }

    public reSize(): this {
        super.reSize();
        if (this.scrollYBarBackground == null) {
            this.initScrollBar();
        }

        this.calculateScroll();
        return this;
    }

    reLayout(): void {
        let maxheight = 0;
        let maxwidth = 0;
        for (let i = 0; i < this.childViews.length; i++) {
            const view = this.childViews[i];
            if (view.Top + view.Height > maxheight) {
                maxheight = view.Top + view.Height;
            }

            if (view.Left + view.Width > maxwidth) {
                maxwidth = view.Left + view.Width;
            }
        }
        if (maxheight > this.Height) {
            this.MaxHeight = maxheight;
        } else if (maxheight <= this.Height) {
            this.MaxHeight = this.Height;
        }

        if (maxwidth > this.Width) {
            this.MaxWidth = maxwidth;
        } else if (maxwidth <= this.Width) {
            this.MaxWidth = this.Width;
        }

        // console.log(this.MaxHeight);
        this.calculateScroll();
    }

    add(child: QUIView) {
        super.add(child);
        this.reLayout();

        if (this.scrollYBarBackground) {
            this.Container.bringToTop(this.scrollYBarBackground);
        }
        if (this.scrollYBar) {
            this.Container.bringToTop(this.scrollYBar);
        }
        if (this.scrollXBarBackground) {
            this.Container.bringToTop(this.scrollXBarBackground);
        }
        if (this.scrollXBar) {
            this.Container.bringToTop(this.scrollXBar);
        }

        return this;
    }
}
